<template>
  <div class="">
    <!-- <ProtectFakeData :fakeData="overseaFakeData"></ProtectFakeData> -->
    <div class="table">
      <div class="title">{{ title }}</div>
      <div class="form">
        <CommonForm :tableForm="tableForm" />
      </div>
      <div class="btn">
        <a-button class="submit" @click="submit">提交</a-button>
        <a-button @click="resetClick">重置</a-button>
      </div>
    </div>
  </div>
</template>

<script>
// import ProtectFakeData from '../../components/pageComponents/protectFakeData.vue'
// import { overseaFakeData } from '../config.js'
import CommonForm from '@/components/commonForm'
import { abroadApply } from '@/api/protectionOfRights'
import FrontMixins from '@/mixins/frontMixin'

export default {
  mixins: [FrontMixins],
  data() {
    return {
      // overseaFakeData,
      tableForm: [
        [
          { span: 5, label: '纠纷应对指导申请人类别' },
          { span: 19, value: '', props: 'type', otherProps: 'typeOther', inputValue: '', type: 'radio', radioValue: '', isShowOther: true, plainOptions: [{ label: '企业', value: '0' }, { label: '社会组织', value: '1' }, { label: '科研院所 ', value: '2' }, { label: '其他', value: '3', }] }
        ],
        [
          { span: 5, label: '申请人' },
          { span: 19, value: '', props: 'applicant' }
        ],
        [
          { span: 5, label: '申请人信息' },
          { span: 19, value: '', props: 'applicantCode', placeholder: '（统一社会信用代码）' }
        ],
        [
          { span: 5, label: '联系人' },
          { span: 19, value: '', props: 'contacter' }
        ],
        [
          { span: 5, label: '联系人邮箱' },
          { span: 19, value: '', props: 'email' }
        ],
        [
          { span: 5, label: '联系电话' },
          { span: 19, value: '', props: 'phone' }
        ],
        [
          { span: 5, label: '详细联系地址' },
          { span: 19, value: '', props: 'address' }
        ],
        [
          { span: 5, label: '涉及纠纷类型' },
          { span: 19, value: '', props: 'disputeType', otherProps: 'disputeTypeOther', inputValue: '', type: 'radio', radioValue: '', isShowOther: true, plainOptions: [{ label: '商标、专利、版权、地理标志等权利有效性纠纷', value: '0' }, { label: '商标、专利、版权、地理标志等权属纠纷', value: '1' }, { label: '商标、专利、版权、地理标志等侵权纠纷 ', value: '2' }, { label: '商标、专利、版权等相关贸易调查纠纷', value: '3' }, { label: '商标、专利、版权、地理标志等许可纠纷', value: '4' }, { label: '展会知识产权纠纷', value: '5' }, { label: '商业秘密纠纷', value: '6' }, { label: '其他', value: '7' }] }
        ],
        [
          { span: 5, label: '涉及权利类别' },
          { span: 19, value: '', props: 'disputeCategory', inputValue: '', otherProps: 'disputeCategoryOther', type: 'radio', radioValue: '', isShowOther: true, plainOptions: [{ label: '发明专利', value: '0' }, { label: '实用新型专利', value: '1' }, { label: '工业品外观设计', value: '2' }, { label: '商标', value: '3' }, { label: '地理标志', value: '4' }, { label: '集成电路布图设计', value: '5' }, { label: '版权', value: '6' }, { label: '其他', value: '7' }] }
        ],
        [
          { span: 5, label: '纠纷国家/地区' },
          { span: 19, value: '', props: 'disputeArea', inputValue: '', otherProps: 'disputeAreaOther', type: 'radio', radioValue: '', isShowOther: true, placeholder: '（请填写其他纠纷国家类型）', plainOptions: [{ label: '美国', value: '0' }, { label: '德国', value: '1' }, { label: '法国', value: '2' }, { label: '英国', value: '3' }, { label: '日本', value: '4' }, { label: '韩国', value: '5' }, { label: '印度', value: '6' }, { label: '巴西', value: '7' }, { label: '俄罗斯', value: '8' }, { label: '东南亚', value: '9' }, { label: '澳大利亚', value: '10' }, { label: '其他', value: '11' }] }
        ],
        [
          { span: 5, label: '纠纷对象类型' },
          { span: 19, value: '', props: 'disputeObject', type: 'radio', inputValue: '', otherProps: 'disputeObjectOther', radioValue: '', isShowOther: true, placeholder: '（请填写其他纠纷对象类型）', plainOptions: [{ label: '竞争对手', value: '0' }, { label: '非专利实施实体（NPE）', value: '1' }, { label: '高校或研究机构 ', value: '2' }, { label: '个人', value: '3' }, { label: '其他', value: '4' }] }
        ],
        [
          { span: 5, label: '纠纷领域' },
          { span: 19, value: '', props: 'disputeDomain', inputValue: '', otherProps: 'disputeDomainOther', type: 'radio', radioValue: '', isShowOther: true, placeholder: '（详细说明具体领域）', plainOptions: [{ label: '机械', value: '0' }, { label: '电学 ', value: '1' }, { label: '通信 ', value: '2' }, { label: '化学', value: '3' }, { label: '光电', value: '4' }, { label: '医药生物', value: '5' }, { label: '其他', value: '6' }] }
        ],
        [
          { span: 5, label: '纠纷应对指导申请事项' },
          { span: 19, value: '', props: 'applyAssist', type: 'textarea', placeholder: '（阐述纠纷情况和指导需求，可附页）' }
        ],
        [
          { span: 5, label: '纠纷影响预估' },
          { span: 19, value: '', props: 'disputeInfluence', type: 'textarea', placeholder: '（阐述纠纷可能造成的不良影响和损失，可附页）' }
        ],
        [
          { span: 5, label: '纠纷级别' },
          { span: 19, value: '', props: 'disputeGrad', type: 'radio', radioValue: '', placeholder: '（详细说明具体领域）', plainOptions: [{ label: '普通纠纷', value: '0' }, { label: '重大、疑难纠纷（重大、疑难纠纷特指影响产业发展、案情复杂、数额特别巨大、波及范围较广的纠纷）电学', value: '1' }] }
        ],
        [
          { span: 5, label: '其他要求', noRequired: true },
          { span: 19, value: '', props: 'applyOther', type: 'textarea', noRequired: true }
        ],
      ],
      tableFormCopy: [],
      title: '海外知识产权纠纷应对指导申请书'
    }
  },
  components: {
    // ProtectFakeData,
    CommonForm,
  },
  created() {
    this.tableFormCopy = JSON.parse(JSON.stringify(this.tableForm))
  },
  methods: {
    resetClick() {
      this.tableForm = JSON.parse(JSON.stringify(this.tableFormCopy))
    },
    submit() {
      if (this.authorityManagement()) {
        return
      }
      let isRequired = true
      let checkForm = [
        { props: 'email', checkRules: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '请填写正确的邮箱!' },
        { props: 'phone', checkRules: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/, message: '请填写正确的联系电话!' },
      ]
      let isRules = []
      this.tableForm.forEach(item => {
        item.forEach(ele => {
          if (ele.props && !ele.noRequired && ele.value === '') {
            isRequired = false
          }
          checkForm.forEach(res => {
            if (res.props === ele.props) {
              if (!res.checkRules.test(ele.value)) {
                this.$message.warning(res.message)
                isRules.push(true)
              }
            }
          })
        })
      })
      // 校验不通过
      if (isRules.some(ele => ele)) {
        return
      }
      if (!isRequired) {
        this.$message.warning('有必填或必选项没有填写或选择。')
        return
      }

      this.$confirm({
        title: '一旦提交不可修改，请认真检查，是否确认提交；是，就提交上去；否，返回检查可继续修改表单',
        onOk: () => {
          let obj = {}
          this.tableForm.forEach(item => {
            item.forEach(ele => {
              if (ele.props) {
                obj[`${ele.props}`] = ele.value
              }
            })
          })

          abroadApply(obj).then(res => {
            let { code, msg } = res
            if (code === 200) {
              this.$message.success(`您已成功提交${this.title}业务申请`)
              this.resetClick()
            } else {
              this.$message.error(msg)
            }
          })
        },
        onCancel() {
        },
        class: 'test',
      });
    },
  }
}
</script>